{extend name="index/index" /}

{block name="name"}

<div class="header-nav">
    <div class="container">
        <nav class="navbar navbar-default">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="hvr-overline-from-left"><a href="{:url('index/Index/index')}">推荐</a></li>
                    {volist name="cateList" id="v"}
                    {if condition="$id == $v['id']"}
                    <li class="active"><a
                            href="{:url('index/Index/tab',['category' => $v['id']])}">{$v['cate_name']}</a></li>
                    {else /}
                    <li class="hvr-overline-from-left"><a
                            href="{:url('index/Index/tab',['category' => $v['id']])}">{$v['cate_name']}</a></li>
                    {/if}
                    {/volist}
                </ul>
            </div><!-- /.navbar-collapse -->
        </nav>
    </div>
</div>
<!-- //nav -->
<!-- main -->
<div id="fh5co-main">
    <div class="container">

        <div class="row">
            <div id="fh5co-board" data-columns>
                {if condition="!empty($data)"}
                {volist name="data" id="val"}
                <div class="item">

                    <div class="animate-box">
                        <a href="/static/uploads/img/{$val['thumb']}" class="image-popup fh5co-board-img">
                            <img src="__IMG__loading.gif" class="lazy"
                                 data-original="/static/uploads/img/{$val['thumb']}"
                                 alt="Free HTML5 Bootstrap template">
                        </a>
                    </div>
                    <div class="fh5co-desc">
                        <p><a href="{:url('index/Note/index',['id'=>$val['id']])}" class="note">{$val['title']}</a></p>
                    </div>
                    <div class="clearfix"></div>
                    <button class="btn praise" data-id="{$val['id']}">
                        <span><i class="glyphicon glyphicon-heart"></i><strong>{$val['praise']}</strong></span>
                    </button>
                    <button class="btn collection" data-id="{$val['id']}">
                        <span><i class="glyphicon glyphicon-star-empty"></i><strong>{$val['collection']}</strong></span>
                    </button>
                    </button>
                </div>
                {/volist}
                {else /}
                <div class="text-center">
                    <img class="bg" src="/static/index/img/404.png"/>
                    <a href="{:url('index/Index/index')}" class="btn btn-success">返回首页</a>
                </div>

                {/if}

            </div>
        </div>
    </div>
</div>
{js href="__JS__note.js"}
{/block}
